<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            clear: both;
        }

        body {
            background-color: beige;
        }

        ul {
            position: absolute;
            top: 45%;
            left: 45%;
        }

        button {

        }
    </style>
    <script type="text/javascript">

        // //==================行内式绑定============================
        // function btn4() {
        //     alert("行内式绑定");
        // };
        // window.onload = function () {
        //     var btn1 = document.getElementsByTagName("button")[0];
        //     var btn2 = document.getElementsByTagName("button")[1];
        //     var btn3 = document.getElementsByTagName("button")[2];
        //     console.log(btn1);
        //     //===============动态绑定事件===================
        //     btn1.onclick = function () {
        //         alert("动态绑定事件1");
        //     };
        //     btn1.onclick = function () {
        //         alert("动态绑定事件2");
        //     };

        //===============监听事件attachEvent===========================
        // btn2.attachEvent("oncliek", function () {
        //     alert("监听事件attachEvent");
        // });
        //===============监听事件addEventListener===========================
        //     btn3.addEventListener("click", function () {
        //         alert("监听事件addEventListener1");
        //     });
        //     btn3.addEventListener("click", function () {
        //         alert("监听事件addEventListener2");
        //     });
        // };

        window.onload = function () {
            var div1 = document.getElementById("div1");
            div1.addEventListener("click", function (e) {
                var obj_Element = e.target || window.event.srcElement;
                console.log(obj_Element.nodeName)
                switch (obj_Element.className) {
                    case "up":
                        console.log(obj_Element.value);
                        break;
                    case "down":
                        console.log(obj_Element.value);
                        break;
                    case "del":
                        console.log(obj_Element.value);
                        break;
                }
            })
        }

    </script>
</head>
<body>
<!--==================================-->
<div id="div1">
    <input type="text"><input type="button" value="上移" class="up"><input type="button" value="下移" class="down"><input
        type="button" value="删除" class="del">
</div>
<div id="div2">
    <input type="text"><input type="button" value="上移" class="up"><input type="button" value="下移" class="down"><input
        type="button" class="del" value="删除">
</div>
<div id="div3">
    <input type="text"><input type="button" value="上移" class="up"><input type="button" value="下移" class="down"><input
        type="button" class="del" value="删除">
</div>


<!--<ul>-->
<!--    <li>-->
<!--        <button>动态绑定事件</button>-->
<!--    </li>-->
<!--    <li>-->
<!--        <button>监听事件attachEvent</button>-->
<!--    </li>-->
<!--    <li>-->
<!--        <button>监听事件addEventListener</button>-->
<!--    </li>-->
<!--    <li>-->
<!--        <button onclick="btn4()">行内式绑定事件</button>-->
<!--    </li>-->
<!--</ul>-->


</body>

</html>